<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:46 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 首页示例二</title>
    
    <link rel="shortcut icon" href="/static/favicon.ico"> <link href="/static/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="/static/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

    <!-- Morris -->
    <link href="/static/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">

    <!-- Gritter -->
    <link href="/static/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">

    <link href="/static/css/animate.min.css" rel="stylesheet">
    <link href="/static/css/style.min862f.css?v=4.1.0" rel="stylesheet">

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>日最大人流量</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-xs btn-white active">近30天</button>
                                <button type="button" class="btn btn-xs btn-white">近1个月</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="flot-chart" style="height: 250px">
                                    <div class="flot-chart-content" id="maxPeople"></div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>日期</th>
                                            <th>最大人流量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>2019-05-30</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>2019-05-29</td>
                                            <td>27</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>2019-05-28</td>
                                            <td>102</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>2019-05-27</td>
                                            <td>32</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>2019-05-26</td>
                                            <td>60</td>
                                        </tr>
                                        <tr>
                                            <td align="center" colspan="3"><a href="javascript:;">更多...</a></td>
                                        </tr>                                                                                
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>人流量统计</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <button id="hour1" type="button" onclick="switchDate(1)" class="btn btn-xs btn-white active">近1小时</button>
                                <button id="hour24" type="button" onclick="switchDate(24)" class="btn btn-xs btn-white">近24小时</button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <form class="form-horizontal m-t">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">查询日期：</label>
                                    <div class="col-sm-10">
                                        <input placeholder="开始日期" class="form-control layer-date" id="start">
                                        <input placeholder="结束日期" class="form-control layer-date" id="end">
                                        <button onclick="changeDate(document.getElementById('start').value,document.getElementById('end').value);return false;" class="form-control layer-date btn btn-primary" style="width: 100px;">确定</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="flot-chart" style="height: 250px">
                                    <div class="flot-chart-content" id="peopleflow"></div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>日期</th>
                                            <th>学校南门</th>
                                            <th>基教北门</th>
                                            <th>综合餐厅</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>2019-05-30</td>
                                            <td>23</td>
                                            <td>23</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>2019-05-29</td>
                                            <td>27</td>
                                            <td>23</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>2019-05-28</td>
                                            <td>102</td>
                                            <td>23</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>2019-05-27</td>
                                            <td>32</td>
                                            <td>23</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>2019-05-26</td>
                                            <td>60</td>
                                            <td>23</td>
                                            <td>23</td>
                                        </tr>
                                        <tr>
                                            <td align="center" colspan="5"><a href="javascript:;">更多...</a></td>
                                        </tr>                                                                                
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <script src="/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="/static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="/static/js/plugins/flot/jquery.flot.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="/static/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="/static/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="/static/js/demo/peity-demo.min.js"></script>
    <script src="/static/js/content.min.js?v=1.0.0"></script>
    <script src="/static/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="/static/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="/static/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="/static/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="/static/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="/static/js/demo/sparkline-demo.min.js"></script>
    <script src="/static/js/plugins/echarts/echarts-all.js"></script>
    <script src="/static/js/plugins/layer/laydate/laydate.js"></script>
    <script>
        function initMaxPeople()
        {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('maxPeople'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '人流量'
                },
                animation: false,
                legend: {
                    data:['基教前','校门口']
                },
                tooltip:{
                    show: true,
                    trigger:'axis',
                    triggerOn:'mousemove|click'
                },
                xAxis: {
                    name: '时间 / d',
                    data: []
                },
                color:['#ff7f50','#87cefa'],
                yAxis: {},
                series: [{
                    name: '基教前',
                    type: 'line',
                    data: [],
                    markLine: {
                        symbol:'none',
                        data: [
                            {name: '警戒线1',yAxis: 50},
                            {name: '警戒线2',yAxis: 60}
                        ]
                    }
                }, {
                    name: '校门口',
                    type: 'line',
                    data: [39, 52, 40, 11, 6, 50, 10, 47, 9, 32, 35, 45, 43, 29, 33, 37, 14, 22, 40, 50, 39, 18, 56, 7, 4, 4, 17, 32, 33, 36, 51, 38, 9, 57, 13, 25, 36, 23, 23, 8, 28, 41, 35, 28, 13, 33, 39, 53, 3, 5, 26, 14, 28, 47, 54, 34, 9, 24, 27, 52]
                }]
            };
            //初始化数据
            //time = ['1','2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '60']
            data = [52, 40, 11, 6, 50, 10, 47, 9, 32, 35, 45, 43, 29, 33, 37, 14, 22, 40, 50, 39, 18, 56, 7, 4, 4, 17, 32, 33, 36, 51, 38, 9, 57, 13, 25, 36, 23, 23, 8, 28, 41, 35, 28, 13, 33, 39, 53, 3, 5, 26, 14, 28, 47, 54, 34, 9, 24, 27, 52, 39]
            //option.xAxis.data = time
            option.series[0].data = data
            //初次渲染
            myChart.setOption(option)
        }

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            animation: false,
            legend: {
                data:[]
            },
            tooltip:{
                show: true
            },
            xAxis: {
                name: '时间 / s',
                data: []
            },
            color:['#ff7f50','#87cefa','#cc5555'],
            yAxis: {},
            series: [],

        };

        var myChart = echarts.init(document.getElementById('peopleflow'))

        // 初始化人流量详细数据
        function initPeopleStatistic()
        {
            var now = new Date().getTime()
            var daysbefore = new Date(now - 1 * 3600 * 1000)
            changeDate(daysbefore / 1000, now / 1000)
        }

        // 改变日期
        function changeDate(start,end)
        {

            console.log(new Date(start * 1000))
            console.log(new Date(end) * 1000)

            if (typeof(start) == 'string')
                start = new Date(start).getTime() / 1000
            if (typeof(end) == 'string')
                end = new Date(end).getTime() / 1000
            
            $.get('/getSites',function(res){
                option.series = []
                var s = res.length
                console.log(res)
                $.each(res,function(index,site){
                    $.get('/peoplecount/select?earliest=' + start + '&latest=' + end + '&site=' + site.pk,function(result){
                        console.log(result)

                        var serie = {
                            name: site.fields.sname,
                            type: 'line',
                            data: result.map(x=>{return x.fields.rnum}),
                            markLine: {
                                symbol:'none',
                                data: [
                                    {name: '警戒线',yAxis: site.fields.salarm},
                                ]
                            }
                        }
                        option.series.push(serie)
                        s--
                        if(s == 0)
                        {
                            // console.log(option)
                            myChart.setOption(option)
                        }
                    })
                })
            })
        }

        // 切换 24小时 / 1 小时
        function switchDate(hours){
            if (hours == 24) {
                $('#hour1').removeClass("active")
                $('#hour24').addClass("active")
            }else if (hours == 1) {
                $('#hour24').removeClass("active")
                $('#hour1').addClass("active")
            }
            var now = new Date().getTime()
            var hoursbefore = new Date(now - hours * 3600 * 1000).getTime()

            console.log(new Date(now))
            console.log(new Date(hoursbefore))
            changeDate(hoursbefore / 1000,now / 1000)
        }

        initMaxPeople()
        initPeopleStatistic()
        

    </script>
    <script>
        // laydate({
        //     elem: "#hello",
        //     event: "focus"
        // });
        var start = {
            elem: "#start",
            format: "YYYY/MM/DD hh:mm:ss",
            // min: laydate.now(),
            max: laydate.now(),
            istime: true,
            istoday: false,
            choose: function(datas) {
                console.log(datas)
                end.min = datas;
                end.start = datas
            }
        };
        var end = {
            elem: "#end",
            format: "YYYY/MM/DD hh:mm:ss",
            // min: laydate.now(),
            max: laydate.now(),
            istime: true,
            istoday: false,
            choose: function(datas) {
                start.max = datas
            }
        };
        laydate(start);
        laydate(end);    
    </script>
    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</body>


<!-- Mirrored from www.zi-han.net/theme/hplus/index_v3.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:49 GMT -->
</html>
